﻿<%@ Page Title="" Language="C#" MasterPageFile="~/EasyUI.Master" AutoEventWireup="true" CodeBehind="ListMy.aspx.cs" Inherits="cebao.Web.mapinfo.ListMy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=6a5e0746feee514e8bb7b3f468a626d1">
    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
     <style type="text/css">
	#mymap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
         .fite {
             margin-left:4px;
         }
         .fite label {
             width:100px;
             float:left;
             line-height:35px;
         }
         .icon-gj{background:url('../css/IconsExtension/gj.png') no-repeat center center;}
         .icon-sj{background:url('../css/IconsExtension/sj.png') no-repeat center center;}
         .icon-ssj{background:url('../css/IconsExtension/ssj.png') no-repeat center center;}
         .icon-xj{background:url('../css/IconsExtension/xj.png') no-repeat center center;}
	</style>
    
    <script type="text/javascript">
        var sprovince = "";
        var scity = "";
        var scounty = "";
        var level;
        var markerClusterer;
        var markers = [];
        $.extend($.fn.tree.methods, {
            getLevel: function (jq, target) {
                var l = $(target).parentsUntil("ul.tree", "ul");
                return l.length + 1;
            }
        });
        var pt;
        var uid = "";
        var map;
        var data_info;
        var opts;
        var icon1 = new BMap.Icon('../images/map1.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon2 = new BMap.Icon('../images/map2.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon3 = new BMap.Icon('../images/map3.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var icon4 = new BMap.Icon('../images/map4.gif', new BMap.Size(18, 34), { anchor: new BMap.Size(9, 34) });
        var mleveltype = [{ "id": "4", "text": "国家级", "iconCls": "icon-gj", "checked": true }, { "id": "3", "text": "省级", "iconCls": "icon-sj", "checked": true }, { "id": "2", "text": "市级", "iconCls": "icon-ssj", "checked": true }, { "id": "1", "text": "县级", "iconCls": "icon-xj", "checked": true }];
        Date.prototype.pattern = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份        
                "d+": this.getDate(), //日        
                "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时        
                "H+": this.getHours(), //小时        
                "m+": this.getMinutes(), //分        
                "s+": this.getSeconds(), //秒        
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度        
                "S": this.getMilliseconds() //毫秒        
            };
            var week = {
                "0": "/u65e5",
                "1": "/u4e00",
                "2": "/u4e8c",
                "3": "/u4e09",
                "4": "/u56db",
                "5": "/u4e94",
                "6": "/u516d"
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }
        $(function () {
            $("#mlevel").combotree({ data: mleveltype, width: 120, valueField: 'id', textField: 'text', editable: false, panelHeight: 'auto', multiple: true, checkbox: true });
            $.ajax({
                type: "post",
                dataType: "json",
                url: "../admin/getinfo.ashx?action=level",
                success: function aa(data) {
                    level = data[0].level;
                    if (level == -1) level = 3;
                    if(level<=3)
                        sprovince = data[0].province;
                    if (level <=2)
                        scity = data[0].city;
                    if (level <= 1)
                        scounty = data[0].county;
                    
                }
            });
            
            opts = {
                width: 250,     // 信息窗口宽度
                height: 80,     // 信息窗口高度
                title: "测报点信息", // 信息窗口标题
                enableMessage:false//设置允许信息窗发送短息
            };
            InitTree();
            InitSearch();
            InitMap();
            InitGird();
            $('#mycon').layout('collapse', 'west');
            $('#mycon1').layout('collapse', 'west');
            

        });
       
        function getQueryParams(queryParams) {            
            queryParams.uprovince = sprovince;
            queryParams.ucity = scity;
            queryParams.ucounty = scounty;
            queryParams.mlevel = $("#mlevel").combotree("getValues").toString();
            return queryParams;

        }
        //增加查询参数，重新加载表格  
        function reloadgrid() {      
            var queryParams = $('#tt').datagrid('options').queryParams;
            getQueryParams(queryParams);
            $('#tt').datagrid('options').queryParams = queryParams;
            $("#tt").datagrid('reload');           
        }

        //初始化表格
        function InitGird() {
            $('#tt').datagrid({
                //title: '测报点列表', //表格标题
                url: 'GetMaps.ashx', //请求数据的页面
                sortName: 'mname', //排序字段
                idField: 'mid', //标识字段,主键
                iconCls: '', //标题左边的图标
                width: '95%', //宽度
                height: '95%', //高度
                nowrap: false, //是否换行，True 就会把数据显示在一行里
                striped: true, //True 奇偶行使用不同背景色
                collapsible: false, //可折叠
                sortOrder: 'desc', //排序类型
                remoteSort: true, //定义是否从服务器给数据排序
                fitColumns: true,
                singleSelect: true,
                method: 'post',
                columns: [[                    
	                { title: '测报站名', field: 'mname', width: 80, sortable: true },
                    //{ title: '用户名', field: 'uname', width: 80, sortable: true },
                    {
                        title: '级别', field: 'mlevel', width: 60, formatter: function (value, row, index) {
                            if (value == 1) {
                                return "县级";
                            } else if (value == 2) {
                                return "市级";
                            } else if (value == 3) {
                                return "省级";
                            } else if (value == 4) {
                                return "国家级";
                            }
                        }
                    }                   

                ]],
                toolbar: "#tab_toolbar",
                queryParams: { "action": "queryc" },
                pageNumber: 1, //默认索引页
                pageSize: 200, //默认一页数据条数
                rownumbers: true, //行号
                pageList: [10, 20, 50, 200, 500],
                pagination: true, //是否开启分页
                onClickRow: function (rowIndex, rowData) {
                    map.centerAndZoom(new BMap.Point(rowData.mjd, rowData.mwd), 14);
                },
                onLoadSuccess: function (data) {
                    data_info = [];
                    map.clearOverlays();
                    $.each(data.rows, function (k, v) {
                        data_info.push({ "lng": v["mjd"], "lat": v["mwd"], "mlevel": v["mlevel"], "mname": v["mname"], "uname": v["uname"], "madd": v["madd"], "mpic": v["mpic"], "uid": v["uid"], "remark": v["remark"] });
                    });
                    var mlevel;
                    var marker;
                   
                    pt = "";
                    if (markers.length > 0)
                    {
                        if(markerClusterer!=null)
                        markerClusterer.removeMarkers(markers);
                        markers = [];
                    }
                    
                    for (var i = 0; i < data_info.length; i++) {
                        mlevel = data_info[i].mlevel;
                        pt = new BMap.Point(data_info[i].lng, data_info[i].lat);
                        if (mlevel == '4')
                            marker = new BMap.Marker(pt, { icon: icon4 });                            
                        else if (mlevel == '3')
                            marker =new BMap.Marker(pt, { icon: icon3 });
                        else if (mlevel == '2')
                        marker =new BMap.Marker(pt, { icon: icon2 });
                        else if (mlevel == '1')
                        marker =new BMap.Marker(pt, { icon: icon1 });
                        var content = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + data_info[i].mname + "</h4><img style='float:right;margin:4px' id='imgDemo' src='" + data_info[i].mpic + "' width='139' height='104' />" + data_info[i].madd + "<br\><a onclick=\"top.addTab(\'设备数据" + data_info[i].uname + "\',\'/mapinfo/listusername.aspx?uname=" + data_info[i].uname + "\', \'icon icon-magic\');\" href='#'>设备数据</a><br/><a onclick=\"top.addTab(\'虫情" + data_info[i].uname + "\',\'/ForestPets/listr.aspx?uid=" + data_info[i].uid + "&qh=" + data_info[i].remark + "\', \'icon icon-magic\');\" href='#'>虫情数据</a>";
                        map.addOverlay(marker);
                        markers.push(marker);
                        addClickHandler(content, marker);
                    }
                    markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });//对地图扩大缩小后会都所有的点全显示出来。
                        if (scounty != "")
                            map.centerAndZoom(scounty, 12);
                        else if (scity != "")
                            map.centerAndZoom(scity,10);
                        else if (sprovince != "")
                            map.centerAndZoom(sprovince,8);
                        else
                            map.centerAndZoom("西安", 5);
                }
            });
            $('#tt').datagrid('getPager').pagination({
                layout: ['list', 'prev', 'next', 'refresh']
            });
        }

        function InitSearch() {
            $("#ipt_search").searchbox({
                width:140,                
                searcher: function (val, name) {
                    var queryParams = $('#tt').datagrid('options').queryParams;
                    getQueryParams(queryParams);
                    $('#tt').datagrid('options').queryParams = queryParams;
                    $('#tt').datagrid('options').queryParams.search_type = name;
                    $('#tt').datagrid('options').queryParams.search_value = val;
                    $('#tt').datagrid('reload');
                },
                prompt: '查询信息'
            });
        }
        function InitMap() {
            map = new BMap.Map("mymap");          // 创建地图实例 
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            map.enableScrollWheelZoom(true);
            var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
            var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
            map.addControl(top_left_control);
            map.addControl(top_left_navigation);
            if (scounty != "")
                map.centerAndZoom(scounty, 11);
            else if (scity != "")
                map.centerAndZoom(scity, 11);
            else if (sprovince != "")
                map.centerAndZoom(sprovince, 11);
            else
                map.centerAndZoom("济南",11);
        }
        
        
        function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                openInfo(content, e);
                
            }
            );
        }
        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            //var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
            var infoWindow = new BMap.InfoWindow(content);
            map.openInfoWindow(infoWindow, point); //开启信息窗口
            //document.getElementById('imgDemo').onload = function () {
            //    infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            //}
        }
        function InitTree() {            
            $('#pt').tree({
                width: '100%', //宽度                
                lines: true,
                //data: provincetree,   
                url: '../areainfo/GetArea.ashx', //请求数据的页面 
                method: 'post',
                queryParams: { "action": "querymyareauser" },
                onBeforeExpand: function (node) {
                    $("#pt").tree("options").queryParams = { "action": "queryyb9" };
                    $('#pt').tree('options').url = "../areainfo/GetArea.ashx?pid=" + node.id;
                },
                onClick: function (node) {
                    sprovince = scity = scounty = "";
                    if (node.text != "") {
                        var lv = $('#pt').tree("getLevel", node.target);
                        if (lv == 2) {
                            if(level>3)
                                sprovince = node.text;
                            else if(level==3)
                                scity = node.text;
                            else if(level==2)
                                scounty = node.text;                            
                        }
                        else if (lv == 3) {
                            if (level > 3)
                            {
                                scity = node.text;
                                sprovince = $('#pt').tree("getParent", node.target).text;
                            }                                
                            else if (level == 3) {
                                scounty = node.text
                                scity = $('#pt').tree("getParent", node.target).text;;
                            }                            
                        }
                        else if (lv == 4)
                        {
                            if (level > 3) {                              
                                scounty = node.text;
                                var node1 = $('#pt').tree("getParent", node.target)
                                scity = node1.text;
                                sprovince = $('#pt').tree("getParent", node1.target).text;
                            }
                        }
                        map.clearOverlays();
                        reloadgrid();
                    }
                },
                onLoadSuccess: function (node, param) {
                    //reloadgrid();
                }
            });
            
        }       
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="easyui-layout" style="width: 100%; height: 100%;" id="mycon">
       <div region="west" split="true" title="区域检索" style="width: 180px;overflow:scroll" id="west">
            <ul id="pt"></ul>
        </div>
        <div region="center" style="background: #eee; overflow: auto">
             <div class="easyui-layout" data-options="fit:true" id="mycon1">   
            <div region="west" split="true" collapsible="true" title="测报点列表" style="width: 350px; overflow: auto" >   
                 <table id="tt"></table>
        </div> 
                  <div region="center" style="background: #eee; overflow: auto">     
                <div id="mymap" ></div>    
                     </div>   
                 </div>
        </div>
    </div>
    
        <div id="tab_toolbar" style="padding: 4px;">
            <table cellpadding="0" cellspacing="0" style="width: 100%">
                <tr>
                    <td style="text-align: right; padding-right: 15px">
                        <input id="mlevel"  name="mlevel" />  

                        <input id="ipt_search" menu="#search_menu" />
                        <div id="search_menu" style="width: 80px">
                            <div name="usernum">
                                用户名
                            </div>
                            <div name="username">
                                姓 名
                            </div>
                        </div>
                    </td>
                </tr>
            </table>

        </div>  
 
</asp:Content>
